<template>
  <div v-if="dialogState">
    <el-dialog
      v-bind="$attrs"
      :title="title"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      width="500px"
      @open="onOpen"
      @close="onClose"
    >
      <el-input
        v-model="infoData.name"
        placeholder="请输入名称"
        :maxlength="200"
        clearable
        :style="{ width: '80%' }"
      ></el-input>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    addFamily,
    addState,
    addCategory,
    addOrder,
    updateCategory,
    updateFamily,
    updateOrder,
    updateState,
  } from '@/api/bird'
  export default {
    components: {},
    data() {
      return {
        infoData: {
          id: null,
          name: null,
        },
        dialogState: false,
        state: this.dialogState,
        rules: {
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur',
            },
          ],
        },
        title: '',
        kind: '',
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      onOpen(info, title, kind) {
        this.infoData.id = info.id
        this.infoData.name = info.name
        this.dialogState = true
        this.title = title
        this.kind = kind
      },
      onClose() {
        this.infoData.name = null
        this.infoData.id = null
        this.dialogState = false
      },
      close() {
        /**
         * 清除info，将状态变成false
         */
        this.onClose()
        this.$message.success('操作取消')
      },
      handelConfirm() {
        if (this.infoData.name === '') {
          return
        } else {
          if (this.title === 'add') {
            switch (this.kind) {
              case 'state':
                addState(this.infoData).then((res) => {
                  this.$message.success(res.msg)
                  this.$emit('resttable', 'state')
                })
                break
              case 'category':
                addCategory(this.infoData).then((res) => {
                  this.$message.success(res.msg)
                  this.$emit('resttable', 'category')
                })
                break
              case 'order':
                addOrder(this.infoData).then((res) => {
                  this.$message.success(res.msg)
                  this.$emit('resttable', 'order')
                })
                break
              case 'family':
                addFamily(this.infoData).then((res) => {
                  this.$message.success(res.msg)
                  this.$emit('resttable', 'family')
                })
                break
            }
          } else {
            if (this.title === 'update') {
              switch (this.kind) {
                case 'state':
                  updateState(this.infoData).then((res) => {
                    this.$message.success(res.msg)
                    this.$emit('resttable', 'state')
                  })
                  break
                case 'category':
                  updateCategory(this.infoData).then((res) => {
                    this.$message.success(res.msg)
                    this.$emit('resttable', 'category')
                  })
                  break
                case 'order':
                  updateOrder(this.infoData).then((res) => {
                    this.$message.success(res.msg)
                    this.$emit('resttable', 'order')
                  })
                  break
                case 'family':
                  updateFamily(this.infoData).then((res) => {
                    this.$message.success(res.msg)
                    this.$emit('resttable', 'family')
                  })
                  break
              }
            }
          }
        }
        console.log('清除内容')
        this.onClose()
      },
    },
  }
</script>
<style scoped></style>
